<template>
  <div class="pb-8 lg:flex justify-center gap-10">
    <div class="mb-5 lg:w-[580px]">
      <video controls class="w-full aspect-video object-contain bg-black" width="343" height="192" controlslist="nodownload">
        <source :src="url" />
      </video>
      <div class="about-main mt-3">
        <div class="text-primary mb-2">{{ companyInfo.company_name }}</div>
        <div class="flex">
          <div class="content line-clamp-2 text-sm">
            <el-link type="primary" class="link">了解详情&gt;&gt;</el-link>
            {{ companyInfo.description }}
          </div>
        </div>
      </div>
    </div>
    <div class="lg:w-[620px]">
      <ul>
        <li v-for="item in companyList" :key="item.title">
          <nuxt-link to="" class="flex mb-5">
            <el-image class="w-[140px] h-[85px] flex-none lg:w-[192.5px] lg:h-[115px]" src="https://wrh.plus/img/cover.jpg" fit="contain" @error="handleError" lazy>
              <template #placeholder>
                <div class="image-slot">
                  <span>加载中</span>
                  <span class="dot">...</span>
                </div>
              </template>
              <template #error>
                <div class="image-slot">加载失败</div>
              </template>
            </el-image>
            <div class="ml-3 border-b">
              <div class="text-base text-[#333] line-clamp-1 mb-2">{{ item.title }}</div>
              <div class="text-sm text-[#666] line-clamp-2">{{ item.content }}</div>
            </div>
          </nuxt-link>
        </li>
      </ul>
      <div class="text-right">
        <el-button type="info">更多资讯</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
const url = `https://wrh.plus/img/wrx.mp4`;
const { data: result } = await useAsyncData("companyInfo", () => {
  return useFetch("/api/companyInfo").then((res) => res.data.value);
});
console.log(result);

const companyInfo = ref("");
if (result.value.code == 1) {
  companyInfo.value = result.value.data;
}

const realTimeInfo = ref([
  {
    title: "环保向“新” | 伟创电气携创新解决方案",
    imgUrl: "http://www.kgznkj.cn/static/Images/nopic.gif",
    content: "近年来，在“双碳”战略目标指引下，伟创电气充分发挥自身在工控领域的技术研发优势和行业应用经验，以节能化、智能化的装备为环保行",
  },
  {
    title: "分条机设备使用到的触摸屏型号 TPC7032Ki/TPC7022Es",
    imgUrl: "http://www.kgznkj.cn/upload/news/month_2309/202309151605043663.jpg",
    content: "条机主要是用于对一些薄膜材料（塑料膜，胶带，滤波，铜箔等）进行纵切分条的机械设备。",
  },
  {
    title: "玻璃倒角机设备使用到的触摸屏型号 TPC7032Ki/TPC7022Es",
    imgUrl: "http://www.kgznkj.cn/upload/news/month_2309/202309151604015238.jpg",
    content: "玻璃倒角机是玻璃后段加工设备中的一种，其主要应用于玻璃的各种倒角加工，设备采用双轴插补运算算法，能够对常见玻璃进行倒圆角与倒",
  },
]);
const { data: newResult } = await useFetch("/api/news/companyList", { params: { pageSize: 3 } });
const companyList = ref(newResult.value.data);
companyList.value?.forEach((item) => (item.content = item.content.replace(/<[^>]+>/g, "")));

const handleError = (e) => {
  console.log(e);
};
</script>
<style lang="scss" scoped>
.about-main {
  .content {
    &::before {
      content: "";
      float: right;
      width: 0;
      height: 100%;
      margin-top: -20px;
    }
    .link {
      float: right;
      //   margin-top: 10px;
      clear: both;
    }
  }
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
.dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}
</style>
